<template>
  <CellBox title="其他费用" isTop>
    <TableBoxMx :data="{
      disabled: !isEdit,
      tbody: data.saleOrderStatementOtherDetails,
      thead: [
        {
          label: '协议书号',
          prop: 'xieYiShuHao',
          align: 'center',
          width: 180,
        },
        {
          label: '费用类型',
          prop: 'type',
          align: 'center',
          width: 180,
        },
        {
          label: '单价',
          prop: 'price',
          align: 'center',
          width: 180,
        },
        {
          label: '数量',
          prop: 'number',
          align: 'center',
          width: 180,
        },
        {
          label: '小计',
          prop: 'amount',
          align: 'center',
          width: 180,
        },
        {
          label: '备注',
          prop: 'remark',
          align: 'center',
          width: null,
          formType: 'text',
        },
      ],
      operation: [
        {
          label: '删除',
          icon: 'Delete',
        }
      ],
    }">
    </TableBoxMx>
    <div class="m-t-8" v-if="isEdit">
      <el-button class="wAuto" icon="Plus" @click="openPup">选择其他费用明细</el-button>
      <SelectCom :pup="pup" :table="pup.table" :selectable="(row: any) => {
        const _arr = data.saleOrderStatementOtherDetails.map((el: any) => el.saleOrderFeeDetailCode)
        return !_arr.includes(row.saleOrderFeeDetailCode)
      }" isCheckbox @selectBtn="selectBtn" @searchBtn="searchBtn">
        <template #search="{ search }">
          <ElFormItemBox label="日期范围" prop="">
            <ElDaysBox :data="search" :dataName="['deliveryDateStart', 'deliveryDateEnd']" />
          </ElFormItemBox>
        </template>
      </SelectCom>
    </div>
  </CellBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    isEdit?: boolean;
  }>(),
  {

  },
);
const pup: any = reactive({
  state: false,
  typeName: 0,
  title: `发货明细`,
  number: 0,
  table: {
    rowKey: 'deliveryBillNo',
    title: '发货明细列表',
    search: {
      pageIndex: 1, // 当前页码 (从1开始)
      pageSize: 30, // 每页显示数据的数量
      queryDataBaseFiled: "xieYiShuHao", // 关键字查询字段，空值查询全部
      likeWords: "", // 查询关键字，空值查询全部
      beginTime: "", // 日期范围-开始时间
      endTime: "", // 日期范围-结束时间
      reconciliationStatus: 0, // 对账状态--1查全部、0-未对账、1-已对账
      customerCode: "", // 客户编码
      saleOrderCode: "", // 订单唯一编码
    },
    resetSearch: {
      deliveryDateStart: '',
      deliveryDateEnd: '',
    },
    tbody: [],
    thead: [
      {
        label: '协议书号',
        prop: 'xieYiShuHao',
        align: 'center',
        width: 150,
        isCanSearch: true
      },
      {
        label: '产品名称',
        prop: 'productName',
        align: 'center',
        width: 180
      },
      {
        label: '费用类型',
        prop: 'type',
        align: 'center',
        width: 120
      },
      {
        label: '单价',
        prop: 'price',
        align: 'center',
        width: 120
      },
      {
        label: '数量',
        prop: 'number',
        align: 'center',
        width: 120
      },
      {
        label: '小计',
        prop: 'amount',
        align: 'center',
        width: 120
      },
      {
        label: '备注',
        prop: 'deliveryMxRemark',
        align: 'left',
        width: null,
      }
    ],
  }
});
const openPup = () => {
  pup.state = true
  searchBtn()
}
const searchBtn = () => {
  const _table = pup.table
  _table.loading = true
  proxy.$api.OrderBusniess.GetMatchPageSaleOrderFeeDetails({
    ..._table.search,
    customerCode: props.data.customerCode
  })
    .then((res: any) => {
      _table.tbody = res.list
      _table.search.totalCount = res.totalCount;
      _table.loading = false
    })
    .catch(() => {

      _table.loading = false
    });
}
const selectBtn = (arr: any) => {
  const _list = props.data.saleOrderStatementOtherDetails
  const _arr = arr.map((el: any) => {
    return {
      saleOrderStatementOtherDetailCode: el.saleOrderStatementOtherDetailCode, //唯一编码
      saleOrderCode: el.saleOrderCode, //订单编码
      xieYiShuHao: el.xieYiShuHao, //协议书号
      productName: el.productName, //产品名称
      saleOrderFeeDetailCode: el.saleOrderFeeDetailCode, //订单其它费用明细Code-不可重复
      type: el.type, //费用类型名称
      price: el.price, //单价
      number: el.number, //数量
      amount: el.amount, //金额
      remark: el.remark, //备注
    }
  })
  _list.push(..._arr)
}
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
